<script setup lang="ts">
import { onMounted, ref, h, inject } from "vue";
import { createPopper } from "@popperjs/core";
import type { Instance } from "@popperjs/core";
import Button from "./components/Button/Button.vue";
import type { ButtonInstance } from "./components/Button/type";
import type { MenuOption } from "./components/Dropdown/types";
import Collapse from "./components/Collapse/Collapse.vue";
import Dropdown from "./components/Dropdown/Dropdown.vue";
import Item from "./components/Collapse/CollapseItem.vue";
import Icon from "./components/Icon/Icon.vue";
import Tooltip from "./components/Tooltip/Tooltip.vue";
let poperInstance: Instance | null = null;
const buttonRef = ref<ButtonInstance | null>(null);
const openedValue = ref(["1"]);
const overlayNode = ref<HTMLElement>();
const triggerNode = ref<HTMLElement>();
const size = ref<any>("2xl");
onMounted(() => {
  // if (buttonRef.value) {
  //   console.log('mounted', buttonRef.value.ref)
  // }
  if (overlayNode.value && triggerNode.value) {
    poperInstance = createPopper(triggerNode.value, overlayNode.value, {
      placement: "righth",
    });
  }
  // console.log(buttonRef.value)
  // console.log(overlayNode.value)
  // console.log(triggerNode.value
  setTimeout(() => {
    // openedValue.value = ['1', '2']
    poperInstance?.setOptions({
      placement: "left",
    });
    size.value = "7x";
  }, 2000);
});
function handelChange(value: boolean) {
  console.log("value--》", value);
}
const trigger = ref<any>("click");
const options: MenuOption[] = [
  { key: 1, label: h("h1", "this is bold") },
  { key: 2, label: "item2", disabled: true },
  { key: 3, label: "item3", divided: true },
  { key: 4, label: "item4" },
];
const inlineConsole = (...args: any) => {
  console.log(...args);
};
</script>

<template>
  <header>
    <Dropdown
      placement="bottom"
      :trigger="trigger"
      :menu-options="options"
      @visible-change="(e) => inlineConsole('visible change', e)"
      @select="(e) => inlineConsole('select', e)"
      ref="tooltipRef"
    >
      <img
        alt="Vue logo"
        class="logo"
        src="./assets/logo.svg"
        width="125"
        height="125"
      />
    </Dropdown>
  </header>
  <main>
    <h1>button</h1>
    <span ref="triggerNode">toolTip</span>
    <div><h5 ref="overlayNode">hellotip</h5></div>
    <Button ref="buttonRef" disabled>按钮</Button>
    <Button round>Round Button</Button>
    <Button circle>circleButton</Button>
    <Button disabled>Disabled Button</Button><br /><br />
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info">Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button><br /><br />
    <Button type="primary" plain>Primary</Button>
    <Button type="success" plain>Success</Button>
    <Button type="info" plain>Info</Button>
    <Button type="warning" plain>Warning</Button>
    <Button type="danger" plain>Danger</Button><br /><br />
    <Tooltip content="hello" trigger="click" @visible-change="handelChange"
      ><Button size="large">Large2</Button></Tooltip
    >
    <Tooltip placement="top" trigger="hover">
      <Button size="large">Large3</Button>
      <template #content>
        <div style="color: red">111111</div>
      </template>
    </Tooltip>
    <Button size="large">Large</Button>
    <Button size="small">Small</Button><br /><br />
    <Button size="large" loading>Loading</Button>
    <Button size="large" icon="arrow-up">Icon</Button><br /><br />
    <h2>h2</h2>
    <h3>h3</h3>
    <hr />
    <a>link</a>fa-solid fa-arrow-down-up-lock
    <hr />
    <font-awesome-icon :icon="['fas', 'fa-arrow-down-up-lock']" />

    <font-awesome-icon :icon="['fas', 'user-nurse']" />
    <hr />
    <Icon
      :icon="['fas', 'user-nurse']"
      :size="size"
      spin
      type="danger"
      li="fe"
    />
    <Tooltip placement="right" trigger="hover">
      <Icon :icon="['fas', 'user-nurse']" size="7x" color="#0e7a0d" />
      <template #content>
        <div style="color: red">111111</div>
      </template>
    </Tooltip>
    <hr />
    -----------------------------------分割线---------------------------
    <Collapse v-model="openedValue" @change="(value) => console.log(value)">
      <Item name="1" title="Title A">
        <h1>headline title</h1>
        <div>this is content a aaa</div>
      </Item>
      <Item name="2" title="Title B">
        <div>this is bbbbb test</div>
      </Item>
      <Item name="3" title="Disabled Title" disabled>
        <div>this is cccc test</div>
      </Item>
    </Collapse>
    {{ openedValue }}
    -----------------------------------分割线---------------------------
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
